<template>
    <div class="page-filter" :class="className">
        <el-form ref="from" :inline="true" :model="searchQuery" :label-width="lableWidth">
            <div v-for="(item, index) in getConfigList()" :key="index"
                :class="`filter-${item.classBox || 'box'} filter-item `" :style="iosheight">
                <el-form-item :label="item.key" :class="[item.key == '-' ? 'datelabel' : '']">
                    <span v-if="item.type === 'noinput'">{{
                        searchQuery[item.value]
                    }}</span>
                    <el-input v-if="item.type === 'input'" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type}`" :type="item.type" size="mini" :disabled="item.disabled"
                        :clearable="item.clearable === false ? item.clearable : true"
                        :placeholder="getPlaceholder(item)" @input="handleEvent(item.event)" />
                    <el-input v-if="item.type === 'percentinput'" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type}`" :type="item.type" size="mini" type="number"
                        @mousewheel.native.prevent @DOMMouseScroll.native.prevent :disabled="item.disabled"
                        :clearable="item.clearable === false ? item.clearable : true"
                        :placeholder="getPlaceholder(item)" @input="handleEvent(item.event)">
                        <span slot="suffix">%</span>
                    </el-input>
                    <el-input v-if="item.type === 'moneyinput'" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type}`" :type="item.type" size="mini" type="number"
                        @mousewheel.native.prevent @DOMMouseScroll.native.prevent :disabled="item.disabled"
                        :clearable="item.clearable === false ? item.clearable : true"
                        :placeholder="getPlaceholder(item)" @input="handleEvent(item.event)">
                        <span slot="suffix">元</span>
                    </el-input>
                    <!-- solt -->
                    <template v-if="item.type === 'slot'">
                        <slot :name="'form-' + item.value" />
                    </template>
                    <!-- 单选框 -->
                    <el-radio-group v-model="searchQuery[item.value]" v-if="item.type === 'radio'">
                        <el-radio v-for="(childItem, childIndex) in listTypeInfo[item.list]" :key="childIndex"
                            :label="childItem.key" :value="childItem.key" @change="handleEvent(item.event)">{{
                                childItem.value }}</el-radio>
                    </el-radio-group>
                    <!-- 测试拼音搜索 -->
                    <el-select popper-class="selectt-css" v-if="item.type === 'pinyinselect'" size="mini"
                        :class="`filter-${item.type} filter-${item.className}`" :ref="item.ref"
                        v-model="searchQuery[item.value]" clearable :placeholder="getPlaceholder(item)"
                        @click.native="pinyinclick(item.list)" @change="
                            pinyinEvent(item.event, searchQuery[item.value], item.label)
                            ">
                        <!-- 多选搜索 -->
                        <el-input v-model="pinyinvalue" class="selectinput" type="text" size="mini" :clearable="true"
                            :placeholder="getPlaceholder(item)" @input="spellmethod" />
                        <el-option v-for="(childItem, childIndex) in copy_list"
                            :disabled="childItem.value == '暂无数据' ? true : false" :key="childItem.key"
                            :label="childItem.value" :value="childItem.key">
                        </el-option>
                    </el-select>
                    <!-- 选择框 -->
                    <!-- v-el-select-load-more:rangeNumber="loadMoreFun(rangeNumber)" -->
                    <!-- :filter-method="dataFilter"
                        @focus="searchClick(item.list,item.value)" -->
                    <!-- (listTypeInfo[item.list] || '').slice(0, rangeNumber) -->
                    <el-select popper-class="selectt-css" v-if="item.type === 'select' && item.value != 'pfid'"
                        size="mini" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type} filter-${item.className}`" :disabled="item.disabled"
                        :clearable="item.clearable === false ? item.clearable : true"
                        :filterable="item.filterable === false ? item.filterable : true" :ref="item.ref"
                        :placeholder="getPlaceholder(item)" @visible-change="isShowSelectOptions"
                        @change="handleEvent(item.event)">
                        <el-option v-for="(childItem, childIndex) in listTypeInfo[item.list]"
                            :key="childItem.value + '-' + childItem.key + '-' + childIndex" :label="childItem.value"
                            :value="childItem.key" />
                    </el-select>
                    <el-select popper-class="selectt-css" v-else-if="item.type === 'select' && item.value === 'pfid'"
                        size="mini" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type} filter-${item.className}`" :disabled="item.disabled"
                        :clearable="item.clearable === false ? item.clearable : true"
                        :filterable="item.filterable === false ? item.filterable : true" :ref="item.ref"
                        :placeholder="getPlaceholder(item)" @visible-change="isShowSelectOptions"
                        @change="handleEvent(item.event)" remote :remote-method="remoteMethod">
                        <el-option v-for="(childItem, childIndex) in listTypeInfo[item.list]"
                            :key="childItem.value + '-' + childItem.key + '-' + childIndex" :label="childItem.value"
                            :value="childItem.key" />
                    </el-select>
                    <!-- 分组选择框 -->
                    <el-select popper-class="selectt-css" v-if="item.type === 'groupselect'" size="mini"
                        v-model="searchQuery[item.value]" :class="`filter-${item.type} filter-${item.className}`"
                        :disabled="item.disabled" :clearable="item.clearable === false ? item.clearable : true"
                        :filterable="item.filterable === false ? item.filterable : true" :ref="item.ref"
                        :placeholder="getPlaceholder(item)" @visible-change="isShowSelectOptions"
                        @change="handleEvent(item.event)" placeholder="请选择">
                        <el-option-group v-for="(childItem, childIndex) in listTypeInfo[item.list]"
                            :key="childItem.label" :label="childItem.label">
                            <el-option v-for="item in childItem.options" :key="item.value" :label="item.value"
                                :value="item.key">
                            </el-option>
                        </el-option-group>
                    </el-select>
                    <!-- 多选 选择框 -->
                    <el-select popper-class="selectt-css" v-if="item.type === 'selectmultiple'" size="mini"
                        :class="`filter-${item.type} filter-${item.className}`" :ref="item.ref"
                        v-model="searchQuery[item.value]" multiple :placeholder="getPlaceholder(item)"
                        @visible-change="isShowSelectOptions" @change="handleEvent(item.event)">
                        <el-option v-for="(childItem, childIndex) in listTypeInfo[item.list]" :key="childIndex"
                            :label="childItem.value" :value="childItem.key">
                        </el-option>
                    </el-select>
                    <!-- 多选 方案二 -->
                    <el-select class="el-select_single" popper-class="selectt-css" collapse-tags
                        v-if="item.type === 'selectmultipletwo'" size="mini"
                        :class="`filter-${item.type} filter-${item.className}`" :ref="item.ref"
                        v-model="searchQuery[item.value]" multiple filterable :placeholder="getPlaceholder(item)"
                        @keydown.native="listen($event, item.ref)" @change="handleEvent(item.event)">
                        <!-- :filter-method="dataFilter"
                        @click.native="searchClick(item.list)" -->
                        <el-option v-for="(childItem, childIndex) in listTypeInfo[item.list]"
                            :key="childItem.value + '-' + childItem.key" :label="childItem.value"
                            @click.native="itemClick(childItem)" :value="childItem.key">
                        </el-option>
                    </el-select>
                    <!-- 多选优化 -->
                    <el-popover placement="top" width="200" trigger="hover" :open-delay="1000"
                        @show="showcontent(searchQuery[item.value])" :content="selectcontent">
                        <el-select popper-class="selectt-css" slot="reference" collapse-tags
                            v-if="item.type === 'optimizedmultiple'" size="mini"
                            :class="`filter-${item.type} filter-${item.className}`" :ref="item.ref"
                            v-model="searchQuery[item.value]" multiple clearable :placeholder="getPlaceholder(item)"
                            @keydown.native="listen($event, item.ref)" @click.native="selectclick(item.list)"
                            @focus="getfocus(searchQuery[item.value])" @change="
                                selectEvent(item.event, searchQuery[item.value], item.label)
                                ">
                            <!-- 多选搜索 -->
                            <el-input v-model="selectvalue" class="selectinput" type="text" size="mini"
                                :clearable="true" :placeholder="getPlaceholder(item)"
                                @input="inputmultiple($event, item.list)" />
                            <el-option v-for="(childItem, childIndex) in items"
                                :disabled="childItem.value == '暂无数据' ? true : false" :key="childItem.key"
                                :label="childItem.value" :value="childItem.value">
                            </el-option>
                        </el-select>
                    </el-popover>
                    <!-- 时间选择框   :picker-options="item.TimePickerOptions"-->
                    <el-time-select v-if="item.type === 'time'" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type}`" :clearable="item.clearable === false ? item.clearable : true"
                        :disabled="item.disabled" :placeholder="getPlaceholder(item)" />
                    <!-- 日期选择框 -->
                    <!-- :picker-options="
                            item.datePickerOptions || datePickerOptions
                        " -->

                    <el-date-picker v-if="item.type === 'date'" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type} filter-date`" :type="item.dateType || 'datetimerange'"
                        :clearable="item.clearable === false ? item.clearable : true" size="mini" range-separator="至"
                        :start-placeholder="item.Startplaceholder || `开始日期`"
                        :end-placeholder="item.Endplaceholder || `结束日期`" :format="item.format || `yyyy-MM-dd HH:mm:ss `"
                        :value-format="item.formatVal || `yyyy-MM-dd HH:mm:ss`" :disabled="item.disabled"
                        :placeholder="getPlaceholder(item)" @change="handleEvent(item.event)" />
                    <el-date-picker v-if="item.type === 'datetime'" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type} filter-time`" :type="item.dateType" :clearable="item.clearable"
                        size="mini" :format="item.format || `yyyy-MM-dd`"
                        :value-format="item.formatVal || `yyyy-MM-dd HH:mm:ss`" :picker-options="pickeroptions"
                        :disabled="item.disabled" :placeholder="getPlaceholder(item)"
                        @change="handleEvent(item.event)" />
                    <el-date-picker v-if="item.type === 'month'" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type} filter-time`" :type="item.dateType" :clearable="item.clearable"
                        size="mini" :format="item.format || `yyyy-MM`" :value-format="item.formatVal || `yyyy-MM`"
                        :picker-options="pickeroptions" :disabled="item.disabled" :placeholder="getPlaceholder(item)"
                        @change="handleEvent(item.event)" />
                    <el-date-picker v-if="item.type === 'timedate'" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type} filter-time`" :type="item.dateType" :clearable="item.clearable"
                        size="mini" :format="item.format || `yyyy-MM-dd`" :value-format="item.formatVal || `yyyy-MM-dd`"
                        :picker-options="pickeroptions" :disabled="item.disabled" :placeholder="getPlaceholder(item)"
                        @change="handleEvent(item.event)" />
                    <div v-if="(item.type === 'timedate' && item.label == '结束时间') ||
                        item.showbbb
                    " class="leftrightcss">
                        <div class="leftrightcss-1">
                            <el-tooltip class="item" effect="dark" content="上一月" placement="top">
                                <span style="color:#409eff;">
                                    <i @click="changeshang" class="el-icon-caret-left shoucss"
                                        style="font-size: 18px;font-weight:bolder;"></i>
                                </span>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="本月" placement="top">
                                <span @click="changeben" class="shoucss"
                                    style="width:20px;height:20px;background-color:#409eff;display:inline-block;font-size:12px;text-align:center;line-height:20px;color:#fff;">本</span>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="下一月" placement="top">
                                <span style="color:#409eff;">
                                    <i @click="changexia" class="el-icon-caret-right shoucss"
                                        style="font-size: 18px;font-weight:bolder;"></i>
                                </span>
                            </el-tooltip>
                        </div>
                    </div>

                    <el-date-picker v-if="item.type === 'year'" v-model="searchQuery[item.value]"
                        :class="`filter-${item.type} filter-time`" :type="item.dateType" :clearable="item.clearable"
                        size="mini" :format="item.format || `yyyy`" :value-format="item.formatVal || `yyyy`"
                        :picker-options="pickeroptions" :disabled="item.disabled" :placeholder="getPlaceholder(item)"
                        @change="handleEvent(item.event)">
                    </el-date-picker>

                    <el-cascader clearable v-if="item.type === 'cascader'" filterable :show-all-levels="false"
                        size="mini" :props="props" :options="provinceAndCityData" v-model="searchQuery[item.value]">
                    </el-cascader>


                    <!-- 按钮 -->
                    <el-button v-else-if="item.type === 'button'" :disabled="item.disabled || false"
                        :size="item.size || `mini`" :class="[isios ? 'isioscss' : `filter-${item.type}`]"
                        :type="item.btType" :icon="item.icon" @click="handleClick(item.event, '', 1000)"
                        @keyup.enter="upenter">
                        {{ item.label }}
                    </el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "PageFilter",
    props: {
        provinceAndCityData: {
            type: Array,
            default: () => {
                return [];
            }
        },
        // 自定义类名
        className: {
            type: String
        },
        lableWidth: {
            type: String,
            default: "80px"
        },
        pickeroptions: {
            type: Object,
            default: () => {
                return {};
            }
        },
        // 相关列表
        listTypeInfo: {
            type: Object,
            default: () => {
                return {};
            }
        },
        // 过滤器列表
        filterList: {
            type: Array
        },
        // 参数
        query: {
            type: Object
        }
    },
    data () {
        return {
            props: { multiple: false },
            string_list: "",
            rangeNumber: 100, //下拉框滚动到底部后新增的条数
            addNumber: 100,
            copy_list: [],
            original_list: [],
            copy_two: [],
            original_two: [],
            pinyinvalue: "",
            iosheight: {
                height: "10px"
            },
            isios: false,
            // 时间相关设置
            datePickerOptions: {
                disabledDate (time) {
                    // 大于当前的时间都不能选 (+十分钟让点击此刻的时候可以选择到当前时间)
                    return time.getTime() > +new Date() + 1000 * 600 * 1;
                }
            },
            flag: "inner", // 内 inner  外outside
            searchQuery: {},
            selectcontent: "",
            selectvalue: "",
            newArr: [],
            items: [],
            timer: null
        };
    },
    watch: {
        searchQuery: {
            handler: function (val) {
                // 传入参数修改，不派发
                if (this.flag === "outside") {
                    this.flag = "inner";
                    return;
                }
                // 修改传入进来的参数
                this.$emit("update:query", { ...this.query, ...val });
            },
            deep: true // 深度监听
        },
        query (val) {
            this.flag = "outside"; // 标识为传入参数修改
            this.searchQuery = val;
        }
    },
    //注册一个自定义指令 `v-el-select-load-more`
    directives: {
        "el-select-load-more": {
            bind (el, binding) {
                // 获取element-ui定义好的scroll盒子
                const SELECTWRAP_DOM = el.querySelector(
                    ".el-select-dropdown .el-select-dropdown__wrap"
                );
                SELECTWRAP_DOM.addEventListener("scroll", function () {
                    /**
                     * scrollHeight 获取元素内容高度(只读)
                     * scrollTop 获取或者设置元素的偏移值,常用于计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                     * clientHeight 读取元素的可见高度(只读)
                     * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                     * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                     */
                    const condition =
                        this.scrollHeight - this.scrollTop <= this.clientHeight;
                    if (condition) binding.value();
                });
            }
        }
    },
    mounted () {
        this.initParams();
        let isMac = /macintosh|mac os x/i.test(navigator.userAgent); //苹果
        console.log(isMac);
        if (isMac) {
            this.iosheight.height = "30px";
            this.isios = true;
        } else {
            this.iosheight.height = "10px";
            this.isios = false;
        }
    },
    methods: {
        //更换年月 上月
        changeshang () {
            this.$emit("changeshang");
        },
        //更换年月 本月
        changeben () {
            this.$emit("changeben");
        },
        //更换年月 下月
        changexia () {
            this.$emit("changexia");
        },
        loadMoreFun (n) {
            //每次滚动到底部可以新增条数
            return () => (this.rangeNumber += this.addNumber);
        },
        //页面筛选框 支持全拼拼音 字母缩写筛选
        dataFilter (val) {
            if (val) {
                let result = []; //声明一个空数组保存搜索内容
                this.original_two.forEach(e => {
                    //循环判断内容和拼音首字母是否匹配
                    let m = this.$pinyin.match(e.value, val);
                    if (m) {
                        result.push(e);
                    }
                });
                this.listTypeInfo[this.string_list] = result; //返回匹配的数组
            } else {
                this.listTypeInfo[this.string_list] = this.original_two; //未输入返回开始copy的原数组
            }
        },
        //通过拼音或者简拼搜索
        spellmethod (val) {
            //过滤方法
            var that = this;
            if (val) {
                let result = []; //声明一个空数组保存搜索内容
                this.original_list.forEach(e => {
                    //循环判断内容和拼音首字母是否匹配
                    let m = this.$pinyin.match(e.value, val);
                    if (m) {
                        result.push(e);
                    }
                });
                if (result.length == 0) {
                    result = [{ value: "暂无数据", key: "0000" }];
                }
                this.copy_list = result; //返回匹配的数组
            } else {
                this.copy_list = this.original_list; //未输入返回开始copy的原数组
            }
        },
        //拼音搜索点击时获取数组内容
        pinyinclick (list) {
            this.pinyinvalue = "";
            this.original_list = this.listTypeInfo[list];
            this.copy_list = this.listTypeInfo[list];
        },
        searchClick (list, value) {
            this.string_list = list;
            this.original_two = this.listTypeInfo[list];
            this.copy_two = this.listTypeInfo[list];
        },
        //拼音下拉筛选change事件
        pinyinEvent (evnet, data, label) {
            let _this = this;
            console.log(evnet);
            if (evnet == "pinyinselect") {
            }
            this.$emit("pinyinEvent", evnet, this.searchQuery, label);
        },
        initParams () {
            const obj = {};
            for (let key in this.query) {
                if (this.query[key]) {
                    obj[key] = this.query[key];
                }
            }
            this.searchQuery = obj;
        },
        // 获取列表
        getConfigList () {
            return this.filterList.filter(
                item =>
                    !item.hasOwnProperty("show") ||
                    (item.hasOwnProperty("show") && item.show)
            );
        },
        // 得到placeholder的显示
        getPlaceholder (row) {
            let placeholder;
            if (row.type === "input" || row.type === "textarea") {
                placeholder = "请输入" + row.label;
            } else if (
                row.type === "select" ||
                row.type === "selectmultiple" ||
                row.type === "selectmultipletwo" ||
                row.type === "time" ||
                row.type === "month" ||
                row.type === "date"
            ) {
                placeholder = "请选择" + row.label;
            } else {
                placeholder = row.label;
            }
            return placeholder;
        },
        isShowSelectOptions (isShowSelectOptions) {
            //选择之后 失去焦点 enter事件不触发下拉框的显示
            if (!isShowSelectOptions) {
                for (let i in this.$refs.from.$children) {
                    if (
                        this.$refs.from.$children[i].$children[1].$refs.reference !==
                        undefined
                    ) {
                        this.$refs.from.$children[i].$children[1].$refs.reference.blur();
                    }
                }
            }
        },
        //监听 多选之后enter失去焦点
        listen (event, ref) {
            // console.log("---->", event);
            if (event.keyCode === 13) {
                switch (ref) {
                    case "refselectone":
                        this.$refs.refselectone[0].blur();
                        break;
                    case "refselect":
                        this.$refs.refselect[0].blur();
                        break;
                    case "refselectthree":
                        this.$refs.refselectthree[0].blur();
                        break;
                }
                // event.preventDefault() // 阻止浏览器默认换行操作
                return false;
            }
        },
        //多选选择之后 选择框就消失
        // 绑定的相关事件
        handleEvent (evnet) {
            let _this = this;
            if (evnet == "selectmultiple") {
                _this.$refs.refselect[0].blur();
            }
            this.$emit("handleEvent", evnet, this.searchQuery);
        },
        itemClick (item) {
            this.$emit("handleClick", "optionItemClick", item);
        },
        //下拉筛选change事件
        selectEvent (evnet, data, label) {
            let _this = this;
            console.log("---->selectEvent", evnet);
            if (evnet == "optimizedmultiple") {
            }
            this.$emit("selectEvent", evnet, this.searchQuery, label);
        },
        getfocus (value) {
            // this.selectvalue = '';
        },
        selectclick (list) {
            console.log("----->", list);
            this.selectvalue = "";
            this.items = this.listTypeInfo[list];
        },
        showcontent (value) {
            this.selectcontent = "";
            for (let i in value) {
                this.selectcontent += value[i] + ",";
            }
            this.selectcontent = this.selectcontent.substring(
                0,
                this.selectcontent.lastIndexOf(",")
            );
        },
        //多选搜索
        inputmultiple (e, list) {
            //过滤方法
            var that = this;
            that.selectvalue = e;
            var reg = this.selectvalue.trim();
            var empty = [];
            var no = [{ value: "暂无数据", key: "000000" }];
            this.items = this.listTypeInfo[list];
            if (reg.length > 0) {
                //newArr 是 data中声明的空数组
                this.newArr = this.items.filter(item => {
                    //判断输入框的内容在下拉框是否存在
                    var numberfliter = item.value.indexOf(reg);
                    //indexOf（） 为0为存在-1为不存在
                    if (numberfliter !== -1) {
                        //直接返回有相同的给newArr数组
                        return item;
                    } else {
                        empty.push(item);
                    }
                });
                if (empty.length == this.listTypeInfo[list].length) {
                    this.items = no;
                } else {
                    this.items = this.newArr;
                }
            } else {
                this.items = this.listTypeInfo[list];
            }
        },
        // 派发按钮点击事件
        handleClick (event, data, delay) {
            let that = this;
            if (!that.timer) {
                this.$emit("handleClick", event, this.searchQuery);
            }
            that.timer = setTimeout(() => {
                that.timer = null;
            }, delay);
        },
        //enter事件
        upenter () {
            this.$emit("upenter");
        },
        remoteMethod (raw) {
            this.$emit("handleEvent", 'remoteSearch', raw);
        },
    }
};
</script>

<style lang="scss">
.selectinput {
    width: 90%;
    margin-left: 10px;
    margin-bottom: 10px;
}

.datelabel>.el-form-item__label {
    width: 15px !important;
}

.el-form-item__label {
    padding-right: 10px !important;
}

.el-form-item__content>.el-select>.el-input>.el-input__inner,
.el-form-item__content>.filter-input>.el-input__inner {
    width: 170px;
}

.filter-percentinput>.el-input__inner {
    width: 170px;
}

.filter-moneyinput>.el-input__inner {
    width: 170px;
}

// 自定义过滤相关
.page-filter {
    padding-bottom: 10px;
    min-height: 54px;
    background-color: #fff;

    .filter-item {
        display: inline-flex;
        align-items: center;

        // height: 10px;
        // margin-bottom: 7px;
        // margin-right: 10px;
        .el-form-item {
            margin-bottom: 0px;

            .el-form-item__label,
            .el-form-item__content {
                font-size: 12px !important;
            }
        }

        ::v-deep .el-input__icon {
            height: 28px !important;
        }
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 130px;
    }

    .el-button--primary.filter-button {
        margin-left: 25px;
    }

    .el-button--reset.filter-button {
        margin-left: 10px;
    }

    .isioscss {
        margin-left: 10px;
    }

    // .btns{
    //   margin-left:5px;
    // }
    // .filter-label {
    //     padding-right: 5px;
    //     font-size: 14px;
    //     color: #606266;
    //     text-overflow: ellipsis;
    //     white-space: nowrap;
    // }
    // .filter-button:first-child{
    //   margin-left:10px;
    // }
    // .filter-input,
    // .filter-select {
    //     width: 220px;
    // }
    // .filter-date{
    //    width: 380px;
    // }
    // .filter-time{
    //     width: 220px;
    // }
}
</style>
<style>
/* 去掉input尾部上下小箭头 start */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    -o-appearance: textfield;
    -ms-appearance: textfield;
    appearance: textfield;
}

/* 去掉input尾部上下小箭头 end */
</style>
<style lang="scss" scoped>
// ::v-deep .el-select-dropdown__item{
//     font-size: 12px !important;
// }
.selectt-css>.el-scrollbar>.el-select-dropdown__wrap>.el-scrollbar__view>.el-select-dropdown__item {
    font-size: 12px !important;
}

.leftrightcss {
    display: inline-block;
    margin-left: 5px;
}

.leftrightcss-1 {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.shoucss:hover {
    cursor: pointer;
}

.el-select_single {
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
